<template>
	<view>
		<page-header :headInfo="headInfo"></page-header>

		<view class="impowerCon">
			<view>欢迎来到四片小叶子</view>
			<view>这是您的情侣专属恋爱空间</view>
		</view>

		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item>
							<image src="../../static/example.png" mode="widthFix"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/example3.png" mode="widthFix"></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/example2.png" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>

		<view class="impower">
			<button>去授权登录</button>
			<view>请允许授权我们获取您的信息，以便给您带来更加完善的体验</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			headInfo: {
				type: 1,
				title: ''
			},
			background: ['color1', 'color2', 'color3'],
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500
		};
	},
	onLoad() {
		
	},
	onShow() {
		
	},
	methods: {
		changeIndicatorDots(e) {
            this.indicatorDots = !this.indicatorDots
        },
        changeAutoplay(e) {
            this.autoplay = !this.autoplay
        },
        intervalChange(e) {
            this.interval = e.target.value
        },
        durationChange(e) {
            this.duration = e.target.value
        }
	}
};
</script>

<style lang="scss">
.impowerCon {
	view {
		text-align: center;
		color: #ec6e81;
	}
	view:nth-child(1) {
		padding: 20rpx 0 10rpx;
	}
	view:nth-child(2) {
		padding: 10rpx 0 20rpx;
	}
}
.uni-padding-wrap{
	margin: 0 120rpx;
	swiper{
		height: 800rpx;
	}
}
.impower {
	margin: 0 120rpx;
	color: #ec6e81;
	font-size: 24rpx;
	button::after {
		border: none;
	}
	button {
		background-color: #ec6e81;
		margin: 20rpx 0;
		border-radius: 60rpx;
		color: #ffffff;
	}
}
</style>
